<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<title>显示</title>
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/css/reset.css" />
	<link rel="stylesheet" href="${pageContext.request.contextPath}/css/index.css" />
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.8.0/jquery.min.js"></script>
	<script src="http://webapi.amap.com/maps?v=1.3&key=e3df1dd8965c37c3d19b218cb441277d" type="text/javascript"></script>
	
	<script>
		
		$(function(){
			init(116.4,39.9,"北京市 北京市"); //初始化北京市
			//天安门		x:	116.397428 	,	y:	39.90923
			//丽都广场	x:	116.476531 	,	y:	39.976132
			var mapObj ;
			function init(x,y,myInfo){
				
				mapObj = new AMap.Map('area',{
			        zoom: 12,
			        center: [x,y],
			        resizeEnable : true,
			        lang : "zh_cn",
			        rotation : 0
			    });
				//缩放工具条
			    mapObj.plugin(["AMap.ToolBar"], function() {
			    	mapObj.addControl(new AMap.ToolBar());
			    });
				
				openInfo(myInfo);
			}
			
			  //在指定位置打开信息窗体
		    function openInfo(myInfo) {
		        //构建信息窗体中显示的内容
		        var info = [];
		        info.push("<div><div style=\"\">"+myInfo+"</div></div> ");
		        infoWindow = new AMap.InfoWindow({
		            content: info.join("<br/>")  //使用默认信息窗体框样式，显示信息内容
		        });
		        infoWindow.open(mapObj, mapObj.getCenter());
		    }
		   
			
			$.ajax({
				url : "${pageContext.request.contextPath}/longLatAction!datagrid.action",
				type : "post",
				data : "",
				dataType : "json",
				success : function(json){
					
					for(var i=0; i<json.rows.length; i++){
						if(i==0){
							$("nav ul").append("<li class='curr' x='"+json.rows[i].longitude+"' y='"+json.rows[i].latitude+"'>"+json.rows[i].city+" - "+json.rows[i].county+"</li>");
						}else{
							$("nav ul").append("<li x='"+json.rows[i].longitude+"' y='"+json.rows[i].latitude+"'>"+json.rows[i].city+" - "+json.rows[i].county+"</li>");
						}
					}
				}
			});
			
			$("nav ul li").live("click",function(){
				
				init($(this).attr("x"), $(this).attr("y"),$(this).text());
				$(this).addClass("curr").siblings().removeClass("curr");
			});
			
			
			
		});
		
	</script>
	
</head>

<body>
	 
	<header>
		<h1>高德API定位</h1>
	</header>
	<section>
		<nav class="fl">
			<ul>
				
			</ul>
		</nav>
		<div id="area">
			
		</div>
	</section>
	<footer>
		<a href="${pageContext.request.contextPath}/longLatAction!datagrid.action">数据</a>
		<a href="${pageContext.request.contextPath}/longLatAction!userAdd.action">增加</a>
		&copy;dingwei&copy;
	</footer>
	
</body>
</html>
